<template>
  <div class="manager-container">
    <Header title="消息公告">
      <van-tabs v-model="isReaded" sticky @change="notifyChange">
        <van-tab name="0" title="未读消息"></van-tab>
        <van-tab name="1" title="已读消息"></van-tab>
      </van-tabs>
    </Header>
    <div class="warpper">

      <van-list v-model="loading" :offest="300" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item.id" @click="getDetail(item)">
          <template #title>
            <div class="cell-title">
              <p class="dot" v-show='item.isreaded != "1"'></p>
              <p class="msg-text">{{ item.msg }}</p>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getDoctorMsgPag, readDoctorUserMsg } from '@/api/user'
import { getSelfInfo } from '@/utils/tokenUtil'

export default {
  name: 'NotifyManager',
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      pageSize: 15,
      pageNo: 1,
      totalCount: 0,
      isReaded: '0'
    }
  },
  mounted() {
    this.loadNotifyList()
  },
  methods: {
    notifyChange() {
      this.pageNo = 1
      this.list = []
      this.loadNotifyList()
    },
    onLoad() {
      if (this.list.length < this.totalCount) {
        this.loadNotifyList()
      } else {
        this.finished = true
      }
    },
    loadNotifyList() {
      let self = getSelfInfo()
      let that = this
      getDoctorMsgPag({ tel: self.tel, isreaded: this.isReaded, pageNo: that.pageNo, pageSize: that.pageSize })
        .then(res => {
          let data = JSON.parse(res.data)
          that.pageNo = that.pageNo + 1
          let resultList = [...data.list]
          if (that.list.length == 0) {
            that.list = resultList
          } else {
            that.list = that.list.concat(resultList)
          }
          that.totalCount = data.totalCount
          this.finished = false
          that.loading = false
        })

    },
    getDetail(item) {
      readDoctorUserMsg(item.id)
      this.$router.push({ name: 'NotifyDetail', params: { msg: item.msg, aae036: item.aae036 }})
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .van-cell__title {
  width: 100%;
}

.cell-title {
  display: flex;
  align-items: center;

  .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: red;
    margin-right: 5px;
    display: block;
  }

  .msg-text {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>

